<template>
  <h2>vue3 + ts</h2>
  <button @click="minus(2)">-</button>
  <span>{{ count }}</span> - <span>{{ doubleCount }}</span>
  <button @click="add">+</button>

  <hr />

  <input type="text" v-model="value" />
  <button @click="fn">btn</button>
  <ul>
    <li v-for="item in list" :key="item.id">
      {{ item.name }} - <button @click="remove(item.id)">remove</button>
    </li>
  </ul>
</template>

<script lang="ts">
import { defineComponent, ref, watch, computed } from "vue";

interface ChildType {
  id: number;
  name: string;
}

export default defineComponent({
  setup() {
    const count = ref<number>(5);
    const add = (): void => {
      count.value++;
    };
    const minus = (num: number): void => {
      count.value -= num;
    };
    watch(count, (val: number) => {
      console.log(val);
    });
    const doubleCount = computed<number>(() => {
      return count.value * 2;
    });

    const list = ref<ChildType[]>([
      {
        id: 1,
        name: "zhangsan",
      },
      {
        id: 2,
        name: "lisi",
      },
    ]);
    const value = ref<string>("");
    const fn = (): void => {
      list.value.push({
        id: new Date().getTime(),
        name: value.value,
      });
    };
    const remove = (id: number) => {
      list.value = list.value.filter((item) => item.id !== id);
    };

    return {
      count,
      add,
      minus,
      doubleCount,
      list,
      value,
      fn,
      remove,
    };
  },
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
